!<template>
    <div>
        <!-- 头部导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图区 -->
        <el-card>

            <!-- 搜索框区域 -->
            <!-- gutter:栅格间隔 -->
            <el-row :gutter="20">
                <el-col :span="8">

                    <!-- clear:数据清空事件 -->
                    <el-input 
                        placeholder="请输入内容" 
                        v-model="queryInfo.query"
                        clearable	
                        @clear="getGoodsList"
                    >
                    
                        <el-button 
                            slot="append" 
                            icon="el-icon-search" 
                            @click="getGoodsList"
                            
                        ></el-button>

                    </el-input>

                </el-col>

                <el-col :span="4">
                    <el-button 
                        type="primary"
                        @click="goAddpage"
                    >
                        添加商品
                    </el-button>
                </el-col>

            </el-row>

            <!-- 表格区 -->
            <el-table :data="goodsList" border stripe>
                <el-table-column type="index">
                </el-table-column>

                <el-table-column 
                    prop="goods_name"
                    label="商品名称"
                ></el-table-column>

                <el-table-column 
                    prop="goods_price"
                    label="商品价格(元)"
                    width="95px"
                ></el-table-column>
                

                <el-table-column 
                    prop="goods_weight"
                    label="商品重量"
                    width="70px"
                ></el-table-column>

                <el-table-column 
                    prop="add_time"
                    label="创建时间"
                    width="140px"
                >
                    <template slot-scope="scope">
                        <!-- |(管道)符号把 create_time的计算结果当成参数给了dateFormat -->
                        {{scope.row.add_time | dateFormat}}
                    </template>
                </el-table-column>

                <!-- 操作 -->
                
                <el-table-column 
                    label="操作"
                    width="130px"
                >
                    <template slot-scope="scope">
                        <el-button 
                            type="primary" 
                            icon="el-icon-edit" 
                            size="mini"
                            @click="showEditDialog(scope.row.goods_id)"
                        ></el-button>
                    

                        <el-button 
                            type="danger" 
                            icon="el-icon-delete" 
                            size="mini"
                            @click="removeById(scope.row.goods_id)"

                        ></el-button>
                    </template>
                </el-table-column>
                
            </el-table>

            <!-- 分页区域 -->
            <!-- 
                页面刷新,默认显示的是2条数据
                size-change：每页显示条数改变触发的事件
                current-change:页码改变触发的事件
                current-page: 当前页数
                page-sizes：每页显示个数选择器的选项设置
                page-size：每页显示条目个数(选择框那个)
                layout：组件布局，子组件名用逗号分隔
                total：总条目数
             -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[5, 10, 20]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                background
            >
            </el-pagination>

        </el-card>

    </div>
</template>

<script>
    export default {

        created() {
            this.getGoodsList();
        },

        data() {
            return {

                //查询的参数
                queryInfo:{
                    query:"", //查询字符串
                    pagenum:1, //当前页码
                    pagesize:10, //每页显示条数
                },

                //商品列表
                goodsList:[],

                //总条数
                total:0,



            }
        },

        methods: {

            //获取商品列表
            async getGoodsList(){
                //get请求都要加params属性
                const {data:res} = await this.$http.get("goods",{
                    params:this.queryInfo
                });

                
                if(res.meta.status !== 200){
                    return this.$message.error("获取参数失败");
                }

                // console.log(res.data);
                    
                this.goodsList = res.data.goods;
                
                this.total = res.data.total;

            },


            //每页显示条数改变触发的事件,newSize是vue自带的
            handleSizeChange(newSize){
                this.queryInfo.pagesize =  newSize;
                this.getGoodsList();
            },

            //页码发生改变触发的事件
            handleCurrentChange(newPage){
                this.queryInfo.pagenum = newPage;
                this.getGoodsList();
            },

            //根据id删除
            async removeById(id){

                //是否确认删除
                const confirmResult=await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch((err) => err)

                // console.log(id,confirmResult);


                if(confirmResult === "cancel"){
                    return this.$message.info("已经取消删除");
                }

                const {data:res} = await  this.$http.delete(`goods/${id}`);

                if(res.meta.status !== 200){
                    return this.$message.error("删除失败");
                }

                this.$message.success("删除成功");

                this.getGoodsList();
            },

            //点击添加商品按钮触发的事件
            goAddpage(){
                //跳转到指定的页面 
                this.$router.push("/goods/add");

            }




            
        }
        
    }
</script>

<style lang="scss" scoped>


</style>
